﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <script type="text/javascript" src="../../js/jquery/jquery.js">
        </script>
        <script type="text/javascript" src="../../js/jquery/jquery-migrate.js">
        </script>
        <script type="text/javascript" src="../../js/jqueryui/jquery-ui.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/public/jsextend.js">
        </script>
       	<script type='text/javascript' src='../../js/ctp/public/ctp.core.js'></script>
		<script type='text/javascript' src='../../js/ctp/public/ctp.base.js'></script>
		<script type='text/javascript' src='../../js/ctp/public/ctp.ui.component.js'></script>		

        <script type="text/javascript" src="../../js/ctp/panel/ctp.ui.panel.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/radiogroup/ctp.ui.radiogroup.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/radio/ctp.ui.radio.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/button/ctp.ui.button.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/groupbox/ctp.ui.groupbox.js">
		</script>
		<script type="text/javascript" src="../../js/ctp/gridlayout/ctp.ui.gridlayout.js">
        </script>	
		<script type="text/javascript" src="../../js/ctp/messagebox/ctp.ui.messagebox.js">
		</script>	
		 <script type="text/javascript" src="../../js/ctp/validator/ctp.validator.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/validator/ctp.validator-rules.js">
        </script>	
		<link href="../../css/skins/standard/ctp-common.css" rel="stylesheet" type="text/css"/>			
        <link href="../../css/panel.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/radiogroup.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/radio.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/button.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/groupbox.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/gridlayout.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/messagebox.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/validator.css" rel="stylesheet" type="text/css"/>
 
        <script>
            var CTP_DEBUG = true;
			//ctp.core.log.lvl=ctp.core.loglvl.info;
            var radioGroup1;
			$(document).ready(
				function(){
                    radioGroup1 = new ctp.ui.radiogroup({
                        id: 'radioGroup1',
                        itemWidth: 150,
                        width: '100%',
                        items: [{
                            id: 'radio1',
                            label: 'radio1',
                            value: 'test1'
                        }, {
                            id: 'radio2',
                            label: 'radio2',
                            value: 'test2'
                        }, {
                            id: 'radio3',
                            label: 'radio3',
                            value: 'test3'
                        }],
                        onChange: function(){
                            ctpMSB.alert({
                                title: '信息提示',
                                message: "你的选择改变"
                            });
                        }
                    });
				var button1= new ctp.ui.button({
			  	      id: 'button1',	
					  text:'禁用radiogroup',		
					  width:'100%',			 
					  onClick: function (){
				                    radioGroup1.setDisable(true); 
			                      }  	   
			    	  
			     });
				var button2= new ctp.ui.button({
			  	      id: 'button2',	
					  text:'启用radiogroup',
					  width:'100%',						 
					  onClick:function (){
				                     radioGroup1.setDisable(false); 
			                      }	  	   
			    	  
			     });
				var button3= new ctp.ui.button({
			  	      id: 'button3',
					  width:'100%',
					  text:'是否所有按钮禁用',					 
					  onClick:function (){
				                     ctpMSB.alert({
									 	title: '信息提示',
									 	message: radioGroup1.isDisable()
									 }); 
			                      }  	   
			    	  
			     });
				var button4= new ctp.ui.button({
			  	      id: 'button4',	
					  width:'100%',
					  text:'是否所有按钮未被选择',					 
					  onClick:function (){
					  	ctpMSB.alert({
									 	title: '信息提示',
									 	message:  radioGroup1.isGroupUnchecked()
									 }); 
				                    
			                      }	  	   
			    	  
			     });
				var button5= new ctp.ui.button({
			  	      id: 'button5',	
					  width:'100%',
					  text:'设置radio1不可用',					 
					  onClick:function (){
					  	 radioGroup1.setItemDisable('radio1',true)
									
			           } 	   
			    	  
			     });
				var button6= new ctp.ui.button({
			  	      id: 'button6',
					  width:'100%',
					  text:'radio1是否不可用',					 
					  onClick:function (){
				                     ctpMSB.alert({
									 	title: '信息提示',
									 	message: radioGroup1.isItemDisable('radio1')
									 });  
			                      }	  	   
			    	  
			     });
				var button7= new ctp.ui.button({
			  	      id: 'button7',
					  width:'100%',
					  text:'选择radio1',					 
					  onClick:function (){
				                    radioGroup1.setItemChecked('radio1',true)
			                      }	  	   
			    	  
			     });
				var button8= new ctp.ui.button({
			  	      id: 'button8',
					  width:'100%',
					  text:'radio1是否选中',					 
					  onClick:function (){
				                    ctpMSB.alert({
									 	title: '信息提示',
									 	message: radioGroup1.isItemChecked('radio1')
									 });  
			                      }
			     });
				var button9= new ctp.ui.button({
			  	      id: 'button9',
					  width:'100%',
					  text:'设置radio1的value',					 
					  onClick:function (){
				                     radioGroup1.setItemValue("radio1","radio1重设value");  
			                      }  	   
			    	  
			     });
				var button10= new ctp.ui.button({
			  	      id: 'button10',
					  width:'100%',
					  text:'取得radio1的值',					 
					  onClick:function (){
				                     ctpMSB.alert({
									 	title: '信息提示',
									 	message: radioGroup1.getItemValue("radio1")
									 });  
			                      }  	   
			    	
			     });
				var button11= new ctp.ui.button({
			  	      id: 'button11',
					  width:'100%',
					  text:'选中数量',					 
					  onClick:function (){
				                     ctpMSB.alert({
									 	title: '信息提示',
									 	message: radioGroup1.getCheckedCount("")
									 });  
			                      } 	   
			    	  
			     });
				var button12= new ctp.ui.button({
			  	      id: 'button12',	
					  width:'100%',
					  text:'设置radio1的文本',					 
					  onClick:function (){
				                     radioGroup1.setItemLabel('radio1',"radio1重设文本");  
			                      }  	   
			    	  
			     });
				 var button13= new ctp.ui.button({
			  	      id: 'button13',
					  width:'100%',
					  text:'选中第一个radio',					 
					  onClick:function (){
				                     radioGroup1.setCheckedByIndex(0);  
			                      }	  	   
			    	  
			     });
				var button14= new ctp.ui.button({
			  	      id: 'button14',
					  width:'100%',	
					  text:'通过Id删除radio1和radio2',					 
					  onClick:function (){
				                      radioGroup1.delGroupItemByIds(['radio1','radio2']); 
			                      }  	   
			    	 
			     });
				 var button15= new ctp.ui.button({
			  	      id: 'button15',
					  width:'100%',	
					  text:'通过值删除radio1和radio3',					 
                      onClick: function(){
                          radioGroup1.delGroupItemByValues(['test1', 'test3']);
                      } 	   
			    	 
			     });
				var button16= new ctp.ui.button({
			  	      id: 'button16',
					  width:'100%',	
					  text:'行式布局',					 
					  onClick:function (){
				                     radioGroup1.setDisplay('rows');  
			                      }  	   
			    	  
			     });
				 var button17= new ctp.ui.button({
			  	      id: 'button17',
					  width:'100%',	
					  text:'列式布局',					 
					  onClick:function (){
				                     radioGroup1.setDisplay('cols');  
			                      }  	   
			    	  
			     });
				var button18= new ctp.ui.button({
			  	      id: 'button18',
					  width:'100%',	
					  text:'成员数量',					 
					  onClick:function (){
					  	ctpMSB.alert({
									 	title: '信息提示',
									 	message: radioGroup1.getItemCount()
									 });
			                      }  	   
			    	 
			     });
                 var button19 = new ctp.ui.button({
                     id: 'button19',
                     width: '100%',
                     text: '取得组件的id',
                     onClick: function(){
                         ctpMSB.alert({
                             title: '信息提示',
                             message: radioGroup1.getId()
                         });
                     }                     
                 });
				 var button20 = new ctp.ui.button({
                     id: 'button20',
                     width: '100%',
                     text: '取得组件的名称',
                     onClick: function(){
                         ctpMSB.alert({
                             title: '信息提示',
                             message: radioGroup1.getName()
                         });
                     }                     
                 });
				 var button21 = new ctp.ui.button({
                     id: 'button21',
                     width: '100%',
                     text: '重置组件为初始状态',
                     onClick: function(){
                         radioGroup1.reset();
                     }                     
                 });
				 var button22 = new ctp.ui.button({
                     id: 'button22',
                     width: '100%',
                     text: '新增两个成员',
                     onClick: function(){
                        radioGroup1.addGroupItem([{id:'new1',label:'新成员1'},{id:'new2',label:'新成员2'}]);						
					 }                     
                 });
				 var button23 = new ctp.ui.button({
                     id: 'button23',
                     width: '100%',
                     text: '删除所有成员',
                     onClick: function(){
                         radioGroup1.delAllItems();
                     }                     
                 });
				 var button23 = new ctp.ui.button({
                     id: 'button23',
                     width: '100%',
                     text: '取得所有成员的id',
                     onClick: function(){
                         var items = radioGroup1.getItems();
						 var tempArray=[];
                         for (var i = 0; i < items.length; i++) {
                             tempArray.push(items[i].getId());
                         }
						 ctpMSB.alert({
                             title: '信息提示',
                             message: tempArray.join(",")
                         });						 
                     }                     
                 });
				 var button24 = new ctp.ui.button({
                     id: 'button24',
                     width: '100%',
                     text: '删除组件',
                     onClick: function(){
                        radioGroup1.remove();
                     }                     
                 });																				 
				 var showLayout = new ctp.ui.gridlayout({
					id:'showLayout',
                    width: '100%',
                    cols: 1,
                    align: 'center',
                    colSpace: 30,
                    items: [[{element: radioGroup1}]]
                
                });  
				var showGroupbox=new ctp.ui.groupbox({
			  	    id: 'showGroupbox',	
					width:'100%',					
					items:[showLayout],
					title:'效果展示区'						   
			     });
				var buttonsLayout = new ctp.ui.gridlayout({
					id:'buttonsLayout',
                    width: '100%',
                    cols: 3,
                    align: 'center',
                    colSpace: 30,
                    items: [
						[{element: button1},{element: button2},{element: button3}],
						[{element: button4},{element: button5},{element: button6}],
						[{element: button7},{element: button8},{element: button9}],
						[{element: button10},{element: button11},{element: button12}],
						[{element: button13},{element: button14},{element: button15}],		     
						[{element: button16},{element: button17},{element: button18}],
						[{element: button19},{element: button20},{element: button21}],
						[{element: button22},{element: button23},{element: button24}]
					]
                
                }); 
				var buttonsGroupbox=new ctp.ui.groupbox({
			  	    id: 'buttonsGroupbox',						
					items:[buttonsLayout],
					width:'100%',
					title:'功能测试区'						   
			     });
				new ctp.ui.panel({
                    title: 'ctp.ui.radiogroup实例',
                    collapsible: true,
                    width: '700px',
                    height: 'auto',
					align:'center',
					items:[showGroupbox,buttonsGroupbox],
                    renderTo: 'body'
                });   
				var validator = new ctp.validator({id:'validator',target:radioGroup1});  
								 
               }	
			  
			);
			
		
        </script>
    </head>
    <BODY>
    	<b>ctp.ui.radiogroup实例</b><hr/><br/>		
		<div id="radioGroupDiv"> 
           <div id="radioDiv"></div> 
           <div id="buttonDiv"></div>         		   
        </div> 

		
</BODY>
</html>